<template>
  <TodoHeader @add-todo="handaddTodo"></TodoHeader>
  <TodoMain :todos="todos">
    <TodoItem
    v-for="todo in todos"
    :key="todo.id"
    v-bind="todo"
    @delete="handleDeleteTodo"
    @toggle="handleToggleTodo"
    @edit="handleEditTodo"
    ></TodoItem>
  </TodoMain>
  <TodoFooter
  :todos="todos"
  @toggleAll="handleToggleAll"
  @clearDone="handleClearCompleted"
  @clearAll="handleClearAll"
  ></TodoFooter>
</template>

<script setup>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import TodoItem from './components/TodoItem.vue'
import { ref } from 'vue'
const todos = ref([])
function handaddTodo(todo) {
  todos.value.push(todo)
}
function handleDeleteTodo(todo) {
  const index = todos.value.indexOf(todo)
  todos.value.splice(index, 1)
}
function handleToggleTodo(id,checked){
  const index = todos.value.findIndex(item => item.id === id)
  todos.value[index].done = checked
}
function handleEditTodo(id,content){
  const index = todos.value.findIndex(item => item.id === id)
  todos.value[index].text = content
}
const handleToggleAll = (checked) => {
  todos.value.forEach(item => {
    item.done=checked
  })
}
const handleClearCompleted = () => {
  todos.value = todos.value.filter(item => !item.done)
}
const handleClearAll = () => {
  todos.value = []
}
</script>

<style scoped>
</style>
